<template>
    <ul class="list">
        <li
        class="item"
        v-for="item of letters"
        :key="item"
        :ref="item"
        @click="handleLetterClick"
        >
        {{item}}
        </li>
    </ul>
</template>

<script>
export default {
  props: {
    cities: {
      type: Object,
      default:{}
    }
  },
  computed: {
    letters() {
      const letters = [];
      for (let i in this.cities) {
        letters.push(i);
      }
      return letters;
    }
  },
  methods:{
      handleLetterClick(e) {
          this.$emit('change',e.target.innerText)
      }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus" >
@import '~styles/varibles.styl';

.list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 1.58rem;
    right: 0;
    bottom: 0;
    width: 0.4rem;

    .item {
        line-height: 0.4rem;
        text-align: center;
        color: $bgColor;
    }
}
</style>
